import React, { Component } from 'react'
import style from './Footer.module.css'

export class Footer extends Component {
  // 全选、取消全选
  allChecked = (event) => {
    // console.log('event', event.target.checked); 
    this.props.allChecked(event.target.checked)
  }
  // 清除已完成的任务
  clearDoneTodo=()=>{
    this.props.clearDoneTodo()
  }
  render() {
    const { todos } = this.props
    const count = todos.filter(todo => todo.done === true).length
    return (
      <div className={style.footer}>
        <input type="checkbox" name="" id="" checked={count === todos.length ? true : false} onChange={this.allChecked} />
        <div className={style.tips}>
          <span>已完成{count}</span>
          /
          <span>全部{todos.length}</span>
        </div>
        <button className={style.clear} onClick={this.clearDoneTodo}>清除已完成的任务</button>
      </div>
    )
  }
}

export default Footer
